<template>
  <div class="train-wrap">
    <div class="content" v-show="$route.path.indexOf('preview') === -1">
      <heading grade="1">发起培训</heading>
      <el-form ref="trainForm" :rules="rules" :model="trainForm" label-width="150px" class="train-form">
        <el-form-item label="运动类型：" required>
          <el-radio-group
            v-model="trainForm.sportsRadio">
            <el-radio v-for="item in sportsType.sportsList" :key="item.label" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="培训标题：" prop="trainTitle"  :rules="{ required: true, message: '请输入培训标题',trigger: 'blur'}">
          <el-col :span="20">
            <x-input v-model="trainForm.trainTitle" placeholder="请输入培训标题" :maxlength="40"></x-input>
          </el-col>
        </el-form-item>
        <el-form-item label="培训封面：" required class="train-cover">
          <img-upload v-model="trainForm.trainCoverUrl" class="logo-upload"/>
        </el-form-item>
        <el-form-item label="课程时效：" required>
          <el-radio-group v-model="trainForm.courseRadio">
            <el-radio v-for="item in courseTime.courseList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
            <!--<el-radio class="radio" label="1">短期课程</el-radio>-->
            <!--<el-radio class="radio" label="2">长期课程</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="培训期次：" required v-if="trainForm.courseRadio == 1">
          <div class="train-period" v-for="(item,index) in trainForm.trainPeriod">
            <!--<span>一期</span>-->
            <el-button type="text" v-model="item.period">{{index+1}}期</el-button>
          </div>
          <el-button @click="addControls('trainPeriod')">添加期数</el-button>
        </el-form-item>
        <el-form-item label="培训时间：" prop="trainDate" :rules="[{ required: true, message: '请选择日期范围'}]" v-if="trainForm.courseRadio == 1">
          <el-date-picker
            v-model="trainDate"
            type="daterange"
            placeholder="请选择日期范围"
            :picker-options="pickerOptions0">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="报名截止时间：" required>
          <el-col :span="10">
            <el-radio-group v-model="trainForm.cutRadio">
              <!--<el-radio v-for="item in trainList.cutList" v-bind:key="item.value" :label="item.value">{{item.label}}</el-radio>-->
              <el-radio class="radio" label="1">课程开始前均可报名</el-radio>
              <el-radio class="radio" label="2">自定义</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="14" v-if="trainForm.cutRadio == 2">
            <el-form-item prop="cutDate" :rules="{ required: true, message: '选择日期时间'}">
              <el-date-picker
                v-model="cutDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="开课时段 (选填)：">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            :maxlength="100"
            placeholder="例1：每天9:00-12:00，14:30-18:00"
            v-model="trainForm.startTime">
          </el-input>
        </el-form-item>
        <el-form-item label="课时及价格：" required class="class-price mod-input">
          <input-column :max="6" v-model="trainForm.lessonItems" :input-config="inputsSet" prop="lessonItems"/>
          <!--<el-row :gutter="20" v-for="(item,index) in trainForm.lessonItems" >
            <el-col :span="7">
              <el-form-item :prop="'lessonItems.' + index + '.lessonTime'"
                :rules="[{ required:true,message:'请输入总课时'},{ type:'number',message:'请输入数字'}]">
                <el-input placeholder="请输入总课时" v-model.number="item.lessonTime" :maxlength="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item :prop="'lessonItems.' + index + '.lessonMoney'"
                :rules="[{ required:true,message:'请输入价格'}, { type:'number',message:'请输入数字'}]">
                <el-input placeholder="请输入价格(免费请填0)" v-model.number="item.lessonMoney" :maxlength="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item
                :prop="'lessonItems.' + index + '.lessonNum'"
                :rules="[{ required:true,message:'请输入名额限制'},{ type:'number',message:'请输入数字'}]">
                <el-input placeholder="名额限制(不限制请填0)" v-model.number="item.lessonNum" :maxlength="8"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button v-if="index>0" @click="delControls('delLesson',index)">删除</el-button>
            </el-col>
          </el-row>
          <el-button @click="addControls('addLesson')">添加</el-button> -->
        </el-form-item>
        <el-form-item label="培训地点："
                      prop="trainAddres"
                      :rules="{ required: true,message: '请输入场地'}">
          <el-input v-model="trainForm.trainAddres" placeholder="请输入场地"></el-input>
          <el-col :span="24">
            我是地图
          </el-col>
        </el-form-item>
        <el-form-item label="课程介绍：" prop="courseCon" :rules="{ required: true,message: '请输入课程介绍',trigger:'blur'}">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6}"
            :maxlength="100"
            placeholder=""
            v-model="trainForm.courseCon">
          </el-input>
        </el-form-item>
        <el-form-item label="主办方联系电话：" prop="phone" :rules="{required: true, validator: 'regexp', pattern: /^1(3|4|5|7|8)\d{9}$/, message: '请输入正确格式的手机号码', trigger: 'blur'}">
          <el-input placeholder="请输入联系电话" v-model.number="trainForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="是否包含保险：" required>
          <el-radio-group v-model="trainForm.safeRadio">
            <el-radio class="radio" label="1">是</el-radio>
            <el-radio class="radio" label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="教练：" required>
          <!--<img-input-group v-model="trainForm.coachItems"></img-input-group>-->
          <!--<el-row v-for="(item,index) in trainForm.coachItems" class="coach-item">
            <el-col :span="4" class="coach-img">
              <img-upload v-model="item.coachItems" class="logo-upload"/>
            </el-col>
            <el-col :span="20" class="coach-info mod-input">
              <el-form-item label="姓名：" label-width="107px">
                <el-col :span="18">
                  <el-col :span="14">
                    <el-form-item
                      :prop="'coachItems.' + index + '.coachName'"
                      :rules="[{required: true,message: '请输入教练姓名'}]">
                      <el-input placeholder="请输入教练姓名" v-model="item.coachName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" class="del-coach">
                    <i class="el-icon-close" v-if="index>0" @click="delControls('delCoach',index)"></i>
                  </el-col>
                </el-col>
              </el-form-item>
              <el-form-item label="简介：" label-width="107px">
                <el-col :span="18">
                  <el-form-item
                    :prop="'coachItems.' + index + '.coachCon'"
                    :rules="[
                         {required: true,message: '请输入教练简介'}
                    ]">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 6}"
                      v-model="item.coachCon"
                      placeholder="请输入教练简介"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-button @click="addControls('addCoach')">添加</el-button>-->
        </el-form-item>
        <el-form-item>
          <el-col :span="24" class="train-agree">
            <el-checkbox v-model="trainForm.agree">我同意并遵守<a href="">《发布服务协议》</a></el-checkbox>
          </el-col>
        </el-form-item>
        <div class="button-box">
          <el-button type="primary" :disabled="!trainForm.agree" @click="submitForm('trainForm')">发布
          </el-button>
          <!--<el-button @click="pre">预览</el-button>-->
          <el-button :disabled="!trainForm.agree" @click="goPreview">预览</el-button>
        </div>
      </el-form>
    </div>
    
    <router-view></router-view>
  </div>
</template>

<script>
  
  import ImgUpload from '../components/ImgUpload'
  import InputColumn from '../components/InputColumn'
  import ImgInputGroup from './components/ImgInputGroup'
  export default {
    components: {
      ImgUpload,
      InputColumn,
      ImgInputGroup
    },
    computed: {
      trainDate: {
        set (value) {
          this.trainForm.trainDate = value && value[0] ? value : ''
        },
        get () {
          return this.trainForm.trainDate
        }
      },
      cutDate: {
        set (value) {
          this.trainForm.cutDate = value
        },
        get () {
          return this.trainForm.cutDate
        }
      }
    },
    data () {
      return {
        rules: {},
        trainForm: {
          sportsRadio: 1, // 运动类型
          trainTitle: '', // 培训标题
          trainCoverUrl: '', // 培训封面
          courseRadio: 1, // 课程时效
          trainPeriod: [{ // 培训期次
            period: ''
          }],
          trainDate: '', // 培训时间范围
          cutRadio: '1', // 报名截止时间
          cutDate: '', // 自定义：报名截止时间
          startTime: '', // 开课时间段
          lessonItems: [
            [
              {name: 'lessonTime', value: ''},
              {name: 'lessonMoney', value: ''},
              {name: 'lessonNum', value: ''}
            ]
          ],
          trainAddres: '',
          // 培训地点
          courseCon: '', // 课程介绍
          phone: '', // 主办方联系电话
          safeRadio: '1', // 是否包含保险
          // coachItems: [{ // 教练
          //   coachImgUrl: '',
          //   coachName: '',
          //   coachCon: ''
          // }],
          coachItems: [ // 教练
            {name: 'coachImgUrl', value: ''},
            {name: 'coachName', value: ''},
            {name: 'coachCon', value: ''}
          ],
          agree: ''
        },
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        inputsSet: [
          {
            placeholder: '请输入课时',
            name: 'lessonTime',
            columnName: '总课时'
          },
          {
            placeholder: '请输入价格(免费请填0)',
            name: 'lessonMoney',
            columnName: '价格',
            type: 'number'
          },
          {
            placeholder: '名额限制(不限制请填0)',
            name: 'lessonNum',
            columnName: '名额限制',
            type: 'number'
          }
        ],
        trainList: {
          cutList: [
            {
              label: '课程开始前均可报名', value: 1
            },
            {
              label: '自定义', value: 2
            }
          ]
        },
        sportsType: {
          sportsList: [
            {
              label: '篮球', value: 1
            },
            {
              label: '足球', value: 2
            },
            {
              label: '羽毛球', value: 3
            },
            {
              label: '乒乓球', value: 4
            },
            {
              label: '网球', value: 5
            },
            {
              label: '排球', value: 6
            },
            {
              label: '其他', value: 7
            }
          ]
        },
        courseTime: {
          courseList: [
            {
              label: '短期课程', value: 1
            },
            {
              label: '长期课程', value: 2
            }
          ]
        }
      }
    },
    methods: {
      go (obj) {
        this.$router.push({name: obj})
      },
      addControls (val) {
        if (val === 'addCoach') {
          // 添加教练
          if (this.trainForm.coachItems.length >= 6) {
            this.$message({
              message: '最多添加6条',
              type: 'warning'
            })
            return
          }
          this.trainForm.coachItems.push({
            name: '',
            con: ''
          })
        } else if (val === 'trainPeriod') {
          // 添加期数
          if (this.trainForm.trainPeriod.length >= 8) {
            this.$message({
              message: '最多添加8条',
              type: 'warning'
            })
            return
          }
          this.trainForm.trainPeriod.push({
            period: ''
          })
        }
      },
      delControls (val, index) {
        if (val === 'delCoach') {
          // 删除教练
          this.trainForm.coachItems.splice(index, 1)
        } else if (val === 'delLesson') {
          // 删除课时及价格
          this.trainForm.lessonItems.splice(index, 1)
        } else if (val === 'trainPeriod') {
          // 删除期数
          this.trainForm.trainPeriod.splice(index, 1)
        }
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            return false
          }
        })
      },
      goPreview () {
        let previewDate = this.trainForm
        previewDate.sportsRadio = this.sportsType.sportsList.filter(item => {
          return item.value === this.trainForm.sportsRadio
        })[0].label
        console.log(previewDate, 22222)
        this.$router.push({name: 'preview'})
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  .train-form {
      overflow:hidden;
      .mod-input {
          .el-input,
          .el-textarea {
              width: 100%;
          }
      }
      .coach-info {
          .el-form-item {
              margin-bottom: 20px;
          }
          .del-coach{
            text-align:right;
            i{
              color:#bbb;
              &:hover{
                cursor:pointer;
                color:#ccc;
              }
            }
          }
      }
      .coach-img {
          .img-upload {
              width: 100px !important;
              height: 100px !important;
              border-radius: 50%;
              border: 1px dashed #d2d2d2;
              & :hover {
                  border-color: #00bb90;
              }
          }
          .avatar-uploader-icon {
              width: 100px;
              height: 100px;
              line-height: 100px;
              background: #fafafa;
              font-size: 24px;
              border-radius: 50%;
          }
          .avatar-uploader .el-upload {
              border-radius: 50%;
              & :hover {
                  border-color: #00bb90;
              }
          }
      }
      .ql-container.ql-snow {
          min-height: 200px;
      }
      .class-price {
          .el-col {
              text-align: center;
          }
      }
      .train-cover {
          margin-top: 10px;
          .logo-upload {
              width: 160px;
              height: 90px;
          }
      }
      .train-period {
          float: left;
          .el-button {
            padding: 0px;
            margin-right: 20px;
            margin-bottom: 10px;
            border-radius: 2px;
            border: 1px solid transparent;
            & :hover {
                border: 1px #00bb90 solid;
            }
          }
          span {
              display: inline-block;
              min-width: 60px;
              height: 30px;
              line-height: 30px;
              color: #333;
          }
      }
      .train-agree {
          a {
              color: #3a84dd;
              text-decoration: none;
              & :hover {
                  text-decoration: underline;
              }
          }
      }
  }

</style>
